<script setup>
import {computed, provide} from 'vue'

const props = defineProps({
  border: Boolean,
  textAlign: String,
  labelWidth: Number,
  size: String,
  valueDarkColor: Boolean,
  alignItems: String,
  backgroundColor: {
    type: String,
    default: '#fff'
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

provide('cell-props', props)

const styles = computed(() => ({ backgroundColor: props.backgroundColor, ...props.styles }))
</script>

<template>
  <view class="cell-container" :class="{ 'cell-item-split-border': props.border }" :style="styles">
    <slot></slot>
  </view>
</template>

<style scoped lang="scss">
.cell-container {
  padding: 0 16px;
  border-radius: 5px;
}
</style>
